<div
  class="product-base pointer"
  [routerLink]="['/', product.slug, product.id]"
>
  <div class="product-image-container">
    <picture
      class="img-responsive d-block bg-rand-{{ '' | random: 1:10 }}"
      [ngClass]="{ 'bg-img-none': imageLoaded }"
    >
      <img
        [defaultImage]="loaderImageUrl"
        [alt]="product.name"
        (onLoad)="imageLoadedSuccess($event)"
        [errorImage]="noImageUrl"
        [lazyLoad]="getProductImageUrl()"
        [offset]="100"
        class="img-responsive w-100 h-100"
      />
    </picture>
  </div>
  <div class="product-meta-info mb-2">
    <b
      class="product-brand text-capitalize font-weight-lighter text-truncate"
      >{{ product.brand?.name || '&nbsp;' }}</b
    >
    <div class="product-name text-truncate">{{ product.name }}</div>
    <div class="product-price">
      <span>
        <b class="product-discountedPrice">
          {{ currency }} {{ product.selling_price.amount | number: '2.1-2' }}
        </b>
        <span *ngIf="product; let cost_price">
          <small class="disablePrice font-weight-lighter ml-1">
            {{ currency }}
            {{ product.max_retail_price.amount | number: '2.1-2' }}
          </small>
        </span>
        <small class="product-discountPercentage font-weight-lighter ml-1">{{
          discountPercent
        }}</small>
      </span>
    </div>
    <div class="product-starRating font-weight-lighter">
      <rating
        [ngModel]="product.rating_summary.average_rating"
        readonly="true"
        max="5"
      ></rating>
      <small class="label pl-1">{{ reviewCount }}</small>
    </div>
  </div>
</div>
